<template>
  <view>
    <view v-if="dataList.length" class="list-bg">
      <image class="w-full h-full" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/ranking-bg1.png"></image>
    </view>
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" @query="queryList">
      <template #top>
        <mt-navbar
          v-if="dataList.length"
          title="接单排行"
          title-width="400rpx"
          bg-color="rgba(0,0,0,0)"
          left-icon-color="#ffffff"
          :title-style="{ color: '#ffffff' }"
        >
          <template #right>
            <view class="flex items-center" @click="openModal">
              <image
                class="w-32rpx h-32rpx mr-8rpx"
                src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-help.svg"
              ></image>
              <text class="text-24rpx text-#ffffff">注意事项</text>
            </view>
          </template>
        </mt-navbar>
        <mt-navbar v-if="!dataList.length" title="接单排行" title-width="400rpx">
          <template #right>
            <view class="flex items-center" @click="openModal">
              <image
                class="w-32rpx h-32rpx mr-8rpx"
                src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-help-black.svg"
              ></image>
              <text class="text-24rpx text-#727687">注意事项</text>
            </view>
          </template>
        </mt-navbar>
      </template>
      <!-- <view class="flex items-center justify-between px-32rpx">
        <view>
          <view class="text-center">
            <image class="w-300rpx h-32rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/ranking-bg3.png"></image>
          </view>
          <view class="text-center">
            <image class="w-216rpx h-62rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/ranking-bg4.png"></image>
          </view>
        </view>
        <view>
          <image class="w-348rpx h-348rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/ranking-bg2.png"></image>
        </view>
      </view> -->
      <view class="relative px-32rpx pt-40rpx">
        <view
          v-for="(item, index) in dataList"
          :key="item.productId"
          class="list-li flex mb-24rpx px-24rpx py-24rpx rd-8rpx"
          :class="{ first: index === 0, second: index === 1, third: index === 2 }"
          @click="goDetail(item)"
        >
          <image
            v-if="index === 0"
            class="w-62rpx h-62rpx mr-16rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-cup1.svg"
          ></image>
          <image
            v-if="index === 1"
            class="w-62rpx h-62rpx mr-16rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-cup2.svg"
          ></image>
          <image
            v-if="index === 2"
            class="w-62rpx h-62rpx mr-16rpx"
            src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-cup3.svg"
          ></image>
          <view class="flex items-center flex-1 min-w-0">
            <view class="flex-1 min-w-0">
              <view class="text-32rpx text-#1A1A1A font-bold mb-36rpx">{{ item.productName }}</view>
              <view class="flex">
                <view class="mr-48rpx">
                  <view class="text-24rpx text-#727687 mb-16rpx">你的排名</view>
                  <view class="text-32rpx text-#1C213E font-bold">{{ item.rankNo }}</view>
                </view>
                <view class="mr-48rpx">
                  <view class="text-24rpx text-#727687 mb-16rpx">本月接单</view>
                  <view class="text-32rpx text-#1C213E font-bold">{{ item.thisMonthReceiveCount }}</view>
                </view>
                <view>
                  <view class="text-24rpx text-#727687 mb-16rpx">平台本月线索</view>
                  <view class="text-32rpx text-#1C213E font-bold">{{ item.thisMonthPlatformReceiveCount }}</view>
                </view>
              </view>
            </view>
            <uv-icon name="arrow-right" color="#727687" size="32rpx"></uv-icon>
          </view>
        </view>
      </view>
    </z-paging>

    <mt-modal ref="modalRef"></mt-modal>
  </view>
</template>

<script setup>
import { cluegetProviderProductReceiveClueRankList } from '@/subProduct/api/index';

function goDetail(row) {
  uni.navigateTo({
    url: `/subProduct/pages/orderRankingDetail?productId=${row.productId}&title=${row.productName}`
  });
}

const modalRef = ref();
function openModal() {
  modalRef.value.open({
    title: '注意事项',
    content: '本月接单数量受上个月产生的贡献值高低影响！',
    showCancel: false
  });
}

// 分页 ref
const pagingRef = ref(null);
const dataList = ref([]);
const lastId = ref('');

// 请求列表数据
async function queryList(pageNum, pageSize) {
  try {
    const params = {
      pageNum: pageNum,
      pageSize: pageSize,
      lastId: pageNum === 1 ? '' : lastId.value
    };

    const res = await cluegetProviderProductReceiveClueRankList(params);
    const list = res.data;
    if (pageNum === 1 && list.length) {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#1484EE'
      });
    }

    lastId.value = list[list.length - 1]?.productId;
    pagingRef.value.complete(list);
  } catch (e) {
    pagingRef.value.complete(false);
  }
}

onShow(() => {
  nextTick(() => {
    pagingRef.value.refresh();
  });
});
</script>

<style lang="scss" scoped>
.list-bg {
  height: 694rpx;
}
.list-li {
  background-color: #ffffff;
  &.first {
    background: linear-gradient(90deg, #fdf7ed, #ffffff);
  }
  &.second {
    background: linear-gradient(90deg, #f5faff, #ffffff);
  }
  &.third {
    background: linear-gradient(90deg, #fdf3ec, #ffffff);
  }
}
</style>
